<template>
    <CommonDialog :dialogShow.sync="dialogShow" :title="curRow?.id ? '编辑比赛' : '新增比赛'" @makeSure="makeSure">
      <template #content>
        <el-form :model="team" label-width="120px" :rules="rules" class="team" ref="raceRef">
          <el-form-item label="比赛名称：" prop="name">
            <common-input v-model="team.name" placeholder="请输入比赛名称"></common-input>
          </el-form-item>
          <el-form-item label="比赛时间：" prop="time">
            <el-date-picker v-model="team.time" type="datetimerange" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" format="yyyy-MM-dd hh:mm:ss" value-format="yyyy-MM-dd hh:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="队伍一：" prop="team1">
            <common-select v-model="team.team1" :options="userOptions1" :multiple="true" :disabled="true"
              placeholder="请选择参赛队员" @change="changeteam"></common-select>
          </el-form-item>
          <el-form-item label="队伍二：" prop="team2">
            <common-select v-model="team.team2" :options="userOptions2" :multiple="true" :disabled="true"
              placeholder="请选择参赛队员" @change="changeteam2"></common-select>
          </el-form-item>
          <el-form-item label="裁判：" prop="referee">
            <common-select v-model="team.referee" :options="refereeList" :multiple="true"
              placeholder="请选择裁判"></common-select>
          </el-form-item>
          <el-form-item label="比赛地点：" prop="raceArea">
            <common-input v-model="team.raceArea" placeholder="请输入比赛地点"></common-input>
          </el-form-item>
        </el-form>
      </template>
    </CommonDialog>
  </template>
  
  <script>
  export default {
    props: {
      changeDialog: {
        typeof: Boolean,
        default: false,
      },
      curRow: {
        typeof: Object,
        default: () => {
          return {
            id: "",
          };
        },
      },
    },
    created() {
      if (this.curRow.id) {
        console.log(123);
  
        const keys = Object.keys(this.curRow);
        keys.forEach((key) => {
          this.team[key] = this.curRow[key];
        });
      }
  
    },
    data() {
      return {
        team: {
          name: "",
          time: "",
          referee: [],
          team1: [],
          team2: [],
          raceArea: "",
        },
        refereeList: [
          {
            value: '9',
            label: '李武'
          }
        ],
        userOptions1: [
          {
            value: "1",
            label: "张1",
            disabled: false
          },
          {
            value: "2",
            label: "张2",
            disabled: false
          },
          {
            value: "3",
            label: "张3",
            disabled: false
          },
          {
            value: "4",
            label: "张4",
            disabled: false
          },
          {
            value: "5",
            label: "张5",
            disabled: false
          },
          {
            value: "6",
            label: "张6",
            disabled: false
          },
          {
            value: "7",
            label: "张7",
            disabled: false
          },
          {
            value: "8",
            label: "张8",
            disabled: false
          },
          {
            value: "9",
            label: "张9",
            disabled: false
          },
          {
            value: "10",
            label: "张10",
            disabled: false
          },
        ],
        userOptions2: [
          {
            value: "1",
            label: "张1",
            disabled: false
  
          },
          {
            value: "2",
            label: "张2",
            disabled: false
  
          },
          {
            value: "3",
            label: "张3",
            disabled: false
  
          },
          {
            value: "4",
            label: "张4",
            disabled: false
          },
          {
            value: "5",
            label: "张5",
            disabled: false
          },
          {
            value: "6",
            label: "张6",
            disabled: false
          },
          {
            value: "7",
            label: "张7",
            disabled: false
          },
          {
            value: "8",
            label: "张8",
            disabled: false
          },
          {
            value: "9",
            label: "张9",
            disabled: false
          },
          {
            value: "10",
            label: "张10",
            disabled: false
          },
        ],
        rules: {
          name: [
            { required: true, message: "请输入比赛名称", trigger: "blur" },
          ],
          time: [
            { required: true, message: "请选择比赛时间", trigger: "change" },
          ],
          referee: [
            { required: true, message: "请选择裁判", trigger: 'change' },
          ],
          team1: [
            { required: true, message: "请选择队伍一", trigger: 'change' },
          ],
          team2: [
            { required: true, message: "请选择队伍一", trigger: 'change' },
          ],
          raceArea: [
            { required: true, message: "请输入比赛地点", trigger: 'blur' },
  
          ]
        },
      };
    },
    computed: {
      dialogShow: {
        get() {
          return this.changeDialog;
        },
        set(v) {
          this.$emit("update:changeDialog", v);
        },
      },
    },
    mounted() { },
  
    methods: {
      makeSure() {
  
        this.$refs.raceRef.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      changeteam(v) {
        console.log(v);
        // this.userOptions2[0].disabled = true
        this.userOptions2.forEach((_item, _index) => {
          _item.disabled = false
        })
        let indexArr = []
        v.forEach(item => {
          this.userOptions2.forEach((_item, _index) => {
            if (item == _item.value) {
              indexArr.push(_index)
            }
          })
        })
        console.log(indexArr, 'a');
        indexArr.forEach((item) => {
          this.userOptions2[item].disabled = true
          this.$set(this.userOptions2[item], 'disabled', true)
        })
        this.$forceUpdate()
  
      },
      changeteam2(v) {
        console.log(v);
        this.userOptions1.forEach((_item, _index) => {
          _item.disabled = false
        })
        let indexArr = []
        v.forEach(item => {
          this.userOptions1.forEach((_item, _index) => {
            if (item == _item.value) {
              indexArr.push(_index)
            }
          })
        })
        console.log(indexArr, 'a');
        indexArr.forEach((item) => {
          this.userOptions1[item].disabled = true
          this.$set(this.userOptions1[item], 'disabled', true)
        })
        this.$forceUpdate()
      }
    },
  };
  </script>
  <style lang="less" scoped>
  .team {
    color: red;
  
    ::v-deep {
      .el-form-item__label {
        color: #333;
        font-size: 16px;
        font-weight: medium;
      }
  
      .el-input {
        width: 380px !important;
      }
    }
  }
  </style>
  